<template>
  <view class="statistic">
    <u-toast ref="uToast"></u-toast>
    <u-no-network></u-no-network>
    <u-navbar title="消息通知">
      <view class="u-m-r-10" slot="right" @click="realAll()"> 全部已读 </view>
    </u-navbar>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>
    <scroll-view
      class="home__grid-group mt-20"
      scroll-y
      @scrolltolower="onScrolltolower"
    >
      <view>
        <u-card
          :head-border-bottom="false"
          :title="item.title"
          v-for="(item, index) in noticeList"
          :key="index"
          @click="goBenefit()"
        >
          <view class="" slot="body">
            <view class="u-body-item u-flex u-row-between u-p-b-0">
              <view class="u-body-item-title u-line-2">{{ item.content }}</view>
            </view>
          </view>
          <view class="flex justify-between" slot="foot">
            <view class="">
              {{ item.updateTime }}
            </view>
            <view class="">
              <u-icon name="arrow-right" size="34" color=""></u-icon>
            </view>
          </view>
        </u-card>
        <u-loadmore :status="status" />
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      list: [
        {
          name: '个人公告',
        },
        {
          name: '系统公告',
        },
      ],
      current: 0,
      pageNo: 1,
      pageSize: '10',
      scrollTop: 0,
      status: 'loadmore',
      noticeList: [],
    };
  },
  onReachBottom() {
    this.onScrolltolower();
  },
  mounted() {
    this.getTotalAccount();
  },
  methods: {
    change(index) {
      this.current = index;
      if (this.current == 1) {
        this.noticeList = [];
      }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onScrolltolower() {
      this.status = 'loading';
      this.terminalInfoList();
    },
    goBenefit() {
      this.$u.route('pages/benefit/benefitStatistic/benefitStatistic');
    },
    getTotalAccount() {
      const _that = this;
      _that.$zx.common_api
        .getNoticeList(_that.pageNo, _that.pageSize)
        .then((data) => {
          console.log('getNoticeList------->97' + JSON.stringify(data));
          if (data.length == 0) {
            _that.noticeList.push('暂无公告');
          } else {
            _that.noticeList = _that.noticeList.concat(data);
            if (data.length !== 0) {
              _that.status = 'loadmore';
              _that.pageNo += 1;
            } else {
              _that.status = 'nomore';
            }
          }
        });
    },
    realAll() {
      this.$zx.common_api.readAllStationMessage().then((data) => {
        this.refreshData();
      });
    },
    refreshData() {
      this.pageNo = 1;
      this.noticeList = [];
      this.getTotalAccount();
    },
  },
};
</script>

<style scoped lang="scss">
.statistic {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>
